<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>无标题</title>
	<style type="text/css">
		body,html{
			margin: 0;
			padding: 0;
			width:100%;
			height: 100%;
		}
	</style>
</head>
<body>
	<canvas id="lock" width="700px" height="600px"></canvas>
	<script type="text/javascript">
		var r=60,margin=40,mr=30,result=new Array(),msg="";//半径 间距
		var canvas=document.getElementById("lock");
		var ctx=canvas.getContext("2d");
		ctx.strokeStyle="#e7592f";
		ctx.lineWidth=5;
		var points = new Array();
		for (var m = 1; m <= 3; m++) {//行
			for (var n = 1; n <=3; n++) {//竖
				var point = new Object();
				point.X=(n-1)*(2*r+margin)+r;
				point.Y=(m-1)*(2*r+margin)+r;
				points.push(point);
			};
		};
		for (var i = 0; i < points.length; i++) {
			ctx.beginPath();
			ctx.arc(points[i].X,points[i].Y,r,0,Math.PI*2,true); 
			ctx.closePath();
			ctx.stroke();	
		};
		//判断点击区域是否是点
		function ispoint(touches,points){
			for (var i = 0; i < points.length; i++) {
				var touch=touches.touches[0],x = touch.pageX,y = touch.pageY,point=points[i];
				if(x>=point.X-r&&x<=point.X+r&&y>=point.Y-r&&y<=point.Y+r)
					return i+1;
			};
			return 0;
		}
		function getNum(x,y){
			for (var i = 0; i < points.length; i++) {
				if(x>=point.X-r&&x<=point.X+r&&y>=point.Y-r&&y<=point.Y+r)
					return i+1;
			};
			return 0;
		}
		function drawpoint(point){
			ctx.fillStyle="#e7592f";
			ctx.beginPath();
			ctx.arc(point.X,point.Y,mr,0,Math.PI*2,true); 
			ctx.closePath();
			ctx.fill();	
			result.push(point);
		}
		function concat(points,point){
			for (var i = 0; i < points.length; i++) {
				if(points[i]==point)
					return true;
			};
			return false;			
		}
		canvas.addEventListener("touchstart",function(e){
			var num = ispoint(e,points);
			if(num!=0)
			{
				var point = points[num-1];
				drawpoint(point);
				msg+= num+" ";
			}
		})
		canvas.addEventListener("touchmove",function(e){
			var num=ispoint(e,points);
			if(num!=0){
				var fromPoint = result[result.length-1];
				var endPoint = points[num-1];
				if(!concat(result,endPoint)){
					msg+= num+" ";
					drawpoint(endPoint);
					ctx.beginPath();
					ctx.moveTo(fromPoint.X,fromPoint.Y);
					ctx.lineTo(endPoint.X,endPoint.Y);
					ctx.closePath();
				    ctx.stroke();
			   }
			}
		})
		canvas.addEventListener("touchend",function(e){
			alert(msg);
		});
	</script>
</body>
</html>